<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
    <meta -equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title></title>
 <body>
    <div class="barrageBox"></div>
    <div class="barrageButton">
        <input type="text" id="input">
        <button id="button">发送</button>
    </div>
</body>
<style>
        body {
            width: 100%;
            height: 100%;
			text-align: center;
        }
        .barrageBox {
            width: 80%;
            height: 400px;
            border: 1px solid orange;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }
        .box {
            position: absolute;
            visibility: hidden;
            animation: barrage 8s linear 0s;
            /* 这个是循环播放的属性，需要就加上
            animation-play-state: paused; */
			max-width: 100px;
        }

        /* 鼠标划入时暂停动画 */
        .box:hover {
            animation-play-state: paused;
        }

        @keyframes barrage {
            from {
                left: 100%;
                visibility: visible;
                transform: translateX(0);
            }

            to {
                left: 0%;
                visibility: visible;
                transform: translateX(-100%);
            }
        }

        .barrageButton {
            position: absolute;
			width: 80%;
			margin-top: 20px;
			text-align: center;
        }
    </style>
	<script>
    // 思路：1、有一个用于播放弹幕的方框 2、抽离不同的参数，距离顶部的距离，用定时器每秒生成一个，是循环生成的，如果数量过多就删除循环。
    let barrageList = ['干得漂亮', '做得好', '你是最棒的', '真的非常非常棒', '今晚打老虎', '佛曰：不可说', '已所不欲，勿施于人', '三人行，必有我师焉，择其善者而从之，其不善者而改之']

    let topList = [20, 40, 60, 80, 100, 120, 140, 160, 180, 200] //随机娶一个数，是到顶部的距离的

    let num = Math.floor(Math.random() * 10) // 随机生成一个数，然后取一个距离顶部的位置 

    let barrageBox = document.querySelector('.barrageBox')

    function createBarrage(barrageList) {
        for (let index = 0; index < barrageList.length; index++) {
            (function (index) {
                setTimeout(() => {
                    let num = Math.floor(Math.random() * 10)
                    let div = document.createElement('div')
                    div.innerText = barrageList[index]
                    div.classList.add('box')
                    div.style.top = topList[num] + 'px'
                    div.style.color = 'rgb(' + my_rgb() + ')' //随机生成一个颜色的
                    barrageBox.appendChild(div)
                }, index * 1000);
            })(index)
        }
    }

    createBarrage(barrageList)

    // 动画循环播放 差不多就是所有的元素都走了一遍，才会一起走第二遍 时间的计算是这样的：每隔一秒生成一个，到最后一个走完，6s是走完一遍的动画，就是长度+6的时间，如果弹幕的数量足够多，这个可以删除
    var my_set = setInterval(() => {
        barrageBox.innerHTML = ''
        createBarrage(barrageList)
    }, (barrageList.length + 6) * 1000);

    // 随机生成一个颜色的
    function my_rgb() {
        let r = Math.floor(Math.random() * 256)
        let g = Math.floor(Math.random() * 256)
        let b = Math.floor(Math.random() * 256)
        return r + ',' + g + ',' + b
    }

    let button = document.getElementById('button')
    let input = document.getElementById('input')


    // 点击增加弹窗，就是增加一个div
    button.onclick = function () {
        if (!input.value) return
        barrageList.push(input.value)

        let num = Math.floor(Math.random() * 10)
        let div = document.createElement('div')
        div.innerText = input.value
        div.classList.add('box')
        div.style.top = topList[num] + 'px'

        // 加上边框，醒目标志
        div.style.border = '1px solid red'
        div.style.borderRadius = 10 + 'px'
        div.style.padding = '5px 10px'

        div.style.color = 'rgb(' + my_rgb() + ')' //随机生成一个颜色的
        barrageBox.appendChild(div)
        input.value = ''

        clearInterval(my_set)
        
        // 因为清除的话会重新计算时间，会造成一段时间的空白期，所以需要渲染一次。
        createBarrage(barrageList)
        my_set = setInterval(() => {
            barrageBox.innerHTML = ''
            createBarrage(barrageList)
        }, (barrageList.length + 6) * 1000);

    }
</script>

</html>